<template>
  <div>
    <ul class="tabs-warp">
      <li class="tabs fl"   :class="tab.value === selectId?'active-tab':'normal'"    v-for="tab in tabs" :key="tab.value">
        <p @mouseleave="leaveTab" @mouseenter="showChildren(tab.value)" @click="select(tab.value)">{{ tab.label }}</p>
        <!-- <div class="children-warp" @mouseenter="enterChild(tab.value)"  @mouseleave="childrenOut" v-if="hasChild(tab)" v-show="isShow(tab.value)">
        <div
        class="children-tabs fl"
          
          v-for="child in tab.children"
          :key="child.value"
        >
          {{ child.label }}
        </div>
        </div> -->
      </li>
    </ul>
  </div>
</template>

<script lang="ts">

import {useOptionsStore} from "/@/store/index";
const optionsStore = useOptionsStore();

export default {
    props:{
        getFromStore: {
          type:Boolean,
          default: true,
        },
        sorts: Array,
        default:()=>{
            return[{}]
        }

    },
  data() {
    return {
      tabs:[
        {label:'全部',value:''}
      ],
      showId:0,
      selectId:'',
     isEnterChild:false,
     isEnterTab:false
    };
  },
  mounted(){
    if(this.getFromStore) {
      optionsStore.getCourseTypes().then((res) =>{
        this.tabs = this.tabs.concat(res);
        //this.courseTypes = res;
        //console.log(res);
      });
    }

    // console.log(this.sorts)
    this.tabs = this.tabs.concat(this.sorts)
    //console.log( this.tabs );
  },
  methods: {
    hasChild(tab){
      if(!tab.children)return false
      if(tab.children.length<=0) return false
      return true
    },
    isShow: function (id) {
         return this.showId === id 

    },
    showChildren: function (id) {
        this.isEnterTab=true
      this.showId = id;
    },
    select:function (id) {
        this.selectId = id;
        this.$emit('select',id)
    },
    leaveTab:function () {
        // console.log(this.isEnterChild)
        // console.log(this.isEnterTab)
        const oldId= this.showId;
        setTimeout( ()=>{
            if(this.isEnterChild ) return
            if( this.showId !== oldId)return
        this.showId = this.tabs[0].value;
        },300)

    },
 
    enterChild:function () {
        this.isEnterChild = true;
     
    },
    childrenOut:function () {
         this.isEnterChild = false;
          this.showId = this.tabs[0].value;
    }
  },
};
</script>

<style lang="scss"  scoped>
.tabs-warp {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom:20px ;
}
.tabs{
    position: relative;
    font-size:14px;
    margin-right: 20px;
    padding: 2px 6px;
   
    cursor: pointer;
    p{
      line-height:30px
    }
}
.active-tab{
    color: var(--el-color-primary);
    font-size:18px;
    border-bottom: 1px solid var(--el-color-primary);
}
.normal:hover{
    color: var(--el-color-primary);
}
.children-warp{
        margin-top: 10px;
    width:max-content;
    position:absolute;
     display: flex;
  flex-direction: row;
  justify-content: flex-start;
  transform: translateX(-20%);
     background-color:#e85900;
     padding: 4px;
     border-radius: 4px;
}
.children-tabs{
    margin-left: 4px;
    height:30px;
    line-height: 30px;
    color: #ffffff;
    width: auto;
}
</style>